<template>
  <div class="pagination">
    <!-- element 分页组件 -->
    <!-- 分页布局：上一页、页码、下一页 -->
    <!-- 每页显示数量和总数据数（通过props接收） -->
    <!-- 当前页码 -->
    <!-- 触发事件 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="this.cPageSize"
        :total="this.cTotal"
        :current-page.sync="pageCode"
        @current-change="currentChange"
        v-if="this.cTotal !== 0">
    </el-pagination>
  </div>
</template>

<script>
import {pagination} from "@/api/pagination";

export default {
  data() {
    return {
      pageGoods: [],
      pageCode: parseInt(sessionStorage.getItem(this.cUrl + "pageCode"))
          ? parseInt(sessionStorage.getItem(this.cUrl + "pageCode"))
          : 1,
    };
  },
  props: {
    cUrl: {
      type: String,
    },
    cTotal: {
      type: Number,
    },
    cPageSize: {
      type: Number,
    },
  },
  methods: {
    currentChange(current) {
      sessionStorage.setItem(this.cUrl + "pageCode", current);
      pagination({
        cUrl: this.cUrl,
        pageNum: this.pageCode,
      }).then((res) => {
        if (res.flag === true) {
          this.pageGoods = res.data.list;
          this.$emit("item-click", this.pageGoods);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  box-sizing: border-box;
  padding-left: 600px; /* 左侧内边距，调整分页位置 */
  width: 1500px; /* 容器宽度 */
  margin-top: 50px; /* 顶部外边距 */
  bottom: 50px; /* 底部定位（需配合定位属性使用，当前注释了定位样式） */

  .el-pagination {
    width: 40px; /* 分页组件宽度（可能过小，建议根据实际需求调整） */
    height: 40px; /* 分页组件高度 */
  }
}
</style>